<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div class="box">
        <div>
            用户名：
            <input type="text" v-model="username">
            <br> 密码：
            <input type="password" v-model="password">
            <br> 确认密码：
            <input type="password" v-model="confirmPassword">
            <br> 昵称：
            <input type="text" v-model="nickname">
            <br> 性别：
            <input type="radio" value="男" v-model="gender">男
            <input type="radio" value="女" v-model="gender">女



            <br> 所属城市：
            <select name="sheng" v-model="province" @click="fn($event)">
                <option v-for="(item,index) in arr" :key="index" :value="index">{{item.name}}</option>
            </select>
            <select name="shi" v-model="municipality">
                <option v-for="(item,index) in arr[province].city" :key="index" :value="index">{{item.name}}</option>
            </select>
            <select name="qu" v-model="region">
                <option v-for="(item,index) in arr[province].city[municipality].districtAndCounty" :key="index" :value="index">{{item}}</option>
            </select>



            <button @click="fn()">提交</button>
        </div>
    </div>
    <script src="../vue.min.js"></script>
    <script>
        new Vue({
            el: '.box',
            data: {
                username: '',
                password: '',
                confirmPassword: '',
                nickname: '',
                gender: '',
                arr: [{        
                    name: "河北省",
                            city: [{          
                        name: "石家庄市",
                                  districtAndCounty: ["长安区", "桥东区", "桥西区", "新华区", "裕华区"]        
                    }, {          
                        name: "张家口市",
                                  districtAndCounty: ["桥西区", "桥东区", "宣化区", "下花园区", "宣化县", "张家口市宣化区"]        
                    }, {          
                        name: "承德市",
                                  districtAndCounty: ["双桥区", "双滦区", "鹰手营子矿区", "承德县", "下板城镇", "兴隆县", "兴隆镇"]        
                    }, {          
                        name: "秦皇岛市",
                                  districtAndCounty: ["海港区", "山海关区", "北戴河区", "昌黎县", "昌黎镇", "抚宁县", "抚宁镇", "卢龙县"]        
                    }]      
                }, {        
                    name: "山西省",
                            city: [{          
                        name: "太原市",
                                  districtAndCounty: ["杏花岭区", "小店区", "迎泽区", "尖草坪区", "万柏林区", "晋源区", "古交市", "清徐县"]        
                    }, {          
                        name: "朔州市",
                                  districtAndCounty: ["朔城区", "平鲁区", "山阴县", "岱岳乡", "应县", "金城镇", "右玉县", "新城镇", "怀仁县", "云中镇"]        
                    }, {          
                        name: "大同市",
                                  districtAndCounty: ["城区", "矿区", "南郊区", "新荣区", "阳高县", "龙泉镇", "天镇县", "玉泉镇", "广灵县"]        
                    }, {          
                        name: "阳泉市",
                                  districtAndCounty: ["城区", "矿区", "郊区", "平定县", "冠山镇", "盂县", "秀水镇"]        
                    }],
                }],
                province: 0,
                municipality: 0,
                region: 0,
            },
            methods: {
                fn() {
                    console.log(this.username);
                    console.log(this.password);
                    console.log(this.nickname);
                    console.log(this.gender);
                    console.log(this.arr[this.province].name);
                    console.log(this.arr[this.province].city[this.municipality].name);
                    console.log(this.arr[this.province].city[this.municipality].districtAndCounty[this.region]);
                }
            },
            compuent: {

            }
        })
    </script>
</body>

</html>